<template>
    <div class="event-list">
        <div class="div-events">
            <div>
                <el-tag v-for="event in Object.keys(curComponent.events)" :key="event" closable @close="removeEvent(event)">
                    {{ event }}
                </el-tag>
            </div>
            <el-button class="addEvent" @click="isShowEvent = true">添加事件</el-button>
        </div>

        <!-- 选择事件 -->
        <Modal v-model="isShowEvent">
            <el-tabs v-model="eventActiveName">
                <el-tab-pane v-for="item in eventList" :key="item.key" :label="item.label" :name="item.key" style="padding: 0 20px">
                    <div>
                        <el-radio-group v-if="item.key == 'redirect'" v-model="item.param" size="small">
                            <el-radio v-for="(i,index) in $store.state.dynamicTags" :key="index" :label="index">{{i}}</el-radio>
                        </el-radio-group>
                        <el-input v-if="item.key == 'alert'" v-model="item.param" type="textarea" placeholder="请输入要 alert 的内容" />
                    </div>
                    <el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
                </el-tab-pane>
            </el-tabs>
        </Modal>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Modal from '@/components/Modal'
import { eventList } from '@/utils/events'

export default {
    components: { Modal },
    data() {
        return {
            isShowEvent: false,
            eventURL: '',
            eventActiveName: 'redirect',
            eventList,
        }
    },
    computed: mapState(['curComponent']),
    methods: {
        addEvent(event, param) {
            this.isShowEvent = false
            this.$store.commit('addEvent', { event, param })
        },

        removeEvent(event) {
            this.$store.commit('removeEvent', event)
        },
        guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (Math.random() * 16) | 0,
                    v = c == 'x' ? r : (r & 0x3) | 0x8
                return v.toString(16)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.event-list {
    .div-events {
        text-align: center;
        margin-top: 10px;

        .el-button {
            display: inline-block;
            margin-bottom: 10px;
        }

        .el-tag {
            display: block;
            width: 50%;
            margin: auto;
            margin-bottom: 10px;
        }
    }
}
.addEvent {
    background: linear-gradient(270deg, #69abb3 0%, #62c1ce 29%, #25a3b8 100%);
    border-radius: 4px;
    border: none;
    width: 205px;
    height: 32px;
}
</style>